{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="shortcut icon" href="#"/>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'css/common.css' %}">
    <link rel="stylesheet" href="{% static 'css/login.css' %}">
</head>
<body>
<div class="box">
    <h1>邮箱登录</h1>
    <form action="" method="post" class="form-horizontal" id="loginForm">
        {% csrf_token %}

        {% for field in form %}
            {% if field.name != 'code' %}
                <div class="form-group form_input">
                    <label class="col-sm-2 control-label">{{ field.label }}</label>
                    <div class="col-sm-10">
                        {{ field }}
                        <span class="data_error">{{ field.errors.0 }}</span>
                    </div>
                </div>
            {% else %}
                <div class="form-group form_input">
                    <label class="col-sm-2 control-label">{{ field.label }}</label>
                    <div class="col-sm-7">
                        {{ field }}
                        <span class="data_error">{{ field.errors.0 }}</span>
                    </div>
                    <div class="col-sm-2 right">
                        <button type="button" class="btn btn-default right" id="sendEmailBtn">获取验证码</button>
                    </div>
                </div>
            {% endif %}
        {% endfor %}

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-primary" id="loginBtn">登 录</button>
                <a class="right" href="{% url 'login' %}">用户名登录</a>
            </div>
        </div>
    </form>
</div>

<script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
<script src="{% static 'js/csrf.js' %}"></script>
<script>
    $(function () {
        bindSendEmailEvent();
        bindLoginEvent();
    });

    function bindSendEmailEvent() {
        $('#sendEmailBtn').click(function () {
            // 1. 获取邮箱，向后台发送请求
            {#清除报错信息#}
            $('.data_error').empty();
            $.ajax({
                url: '{% url 'send_email' %}',
                type: 'POST',
                data: {
                    'role': $('#id_role').val(),
                    'email': $('#id_email').val(),
                },
                {#headers: {'X-CSRFTOKEN': getCookie('csrftoken'),},#}
                dataType: 'JSON',
                success: function (res) {
                    {#展示报错信息#}
                    {#console.log(res)#}
                    if (res.status) {
                        // 2. 动态效果，禁用按钮，显示倒计时
                        sendEmailCountDown($(this), 5);
                    } else {
                        {#{ status: false, detail: { email: [ "这个字段是必填项。" ] } }#}
                        $.each(res.detail, function (k, v) {
                            $('#id_' + k).next().text(v[0]);
                        })
                    }
                }
            })
        });
    }

    function sendEmailCountDown($this, seconds) {
        // 禁用按钮
        $this.prop('disabled', true);
        // 倒计时
        var ori_val = $this.text();
        {#var seconds = 3;#}
        $this.text(seconds + '秒后重试');
        var remind = setInterval(function () {
            seconds -= 1;
            $this.text(seconds + '秒后重试');
            if (seconds <= 0) {
                // 恢复按钮
                clearInterval(remind);
                $this.prop('disabled', false);
                $this.text(ori_val);
            }
        }, 1000);
    }

    function bindLoginEvent() {
        $('#loginBtn').click(function () {
            $('.data_error').empty();
            $.ajax({
                url: '{% url 'email_login' %}',
                type: 'POST',
                data: $('#loginForm').serialize(),
                dataType: 'JSON',
                success: function (res) {
                    if (res.status) {
                        location.href = res.data;
                    } else {
                        $.each(res.detail, function (k, v) {
                            $('#id_' + k).next().text(v[0]);
                        })
                    }
                }
            })
        });
    }

</script>
</body>
</html>